| vue | 您所在的位置：网站首页 › vue-json-editor 禁止修改 › vue |
vue
|
一、概述
现有一个vue项目，需要一个json编辑器，能够格式化json数据，同时也支持编辑功能。 vue-json-editor 插件就可以实现这个功能 二、vue-json-editor 使用 安装插件 npm install vue-json-editor --save 使用 test.vue  
确定
// 导入模块
import vueJsonEditor from 'vue-json-editor'
export default {
// 注册组件
components: { vueJsonEditor },
data() {
return {
hasJsonFlag:true, // json是否验证通过
// json数据
resultInfo: {
'employees': [
{
'firstName': 'Bill',
'lastName': 'Gates'
},
{
'firstName': 'George',
'lastName': 'Bush'
},
{
'firstName': 'Thomas',
'lastName': 'Carter'
}
]
}
}
},
mounted: function() {
},
methods: {
onJsonChange (value) {
// console.log('更改value:', value);
// 实时保存
this.onJsonSave(value)
},
onJsonSave (value) {
// console.log('保存value:', value);
this.resultInfo = value
this.hasJsonFlag = true
},
onError(value) {
// console.log("json错误了value:", value);
this.hasJsonFlag = false
},
// 检查json
checkJson(){
if (this.hasJsonFlag == false){
// console.log("json验证失败")
// this.$message.error("json验证失败")
alert("json验证失败")
return false
} else {
// console.log("json验证成功")
// this.$message.success("json验证成功")
alert("json验证成功")
return true
}
},
}
}
View Code
插件参数说明： 相关说明： resultInfo 默认绑定的变量，这个变量可以为空，编辑器会显示为{} :showBtns 这里不显示保存按钮，为什么呢？原因有2个。1. 默认样式不好看。2. 只能当json数据正确，才能点击保存按钮，否则禁止点击。 json-change，json-save，has-error 这3个事件，是会实时触发的。
这里我额外加了一个检测方法，用来判断json数据是否正确。默认标记为true，当不正确时，会改变状态为false。 访问 点击确定，提示成功
改为错误的，点击确定，会提示失败。
注意：这个json编辑会带有下来菜单，实际项目中，需要去除，比较用户误操作。 在实际使用中发现几个问题： 1. 输入中文时，传给后端的值不多 2. 输入大量json时，会有部分数据丢失。 因此，我们使用下面的编辑器bin-code-editor 三、bin-code-editor 开发文档 | GITHUB 安装模块 npm install bin-code-editor -d引入 在 main.js 中写入2行 import CodeEditor from 'bin-code-editor'; Vue.use(CodeEditor);
test.vue
提交
const jsonData =`{
"employees": [{
"firstName": "Bill",
"lastName": "Gates"
}, {
"firstName": "George",
"lastName": "Bush"
}, {
"firstName": "Thomas",
"lastName": "Carter"
}]
}`
export default {
data() {
return {
jsonStr:jsonData
}
},
methods: {
// 检测json格式
isJSON(str) {
if (typeof str == 'string') {
try {
var obj=JSON.parse(str);
if(typeof obj == 'object' && obj ){
return true;
}else{
return false;
}
} catch(e) {
return false;
}
}else if (typeof str == 'object' && str) {
return true;
}
},
onSubumit(){
if (!this.isJSON(this.jsonStr)){
this.$message.error(`json格式错误`)
return false
}
this.$message.success('json格式正确')
}
}
}
View Code
访问测试页面，效果如下：
输入错误的值，点击执行，会有提示
本文参考链接： https://blog.csdn.net/qq_41956789/article/details/104960794 https://juejin.cn/post/6844904106671210503
|
【本文地址】
公司简介
联系我们